<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        <ul id="imgList">
            <li><img src="./img/001.gif" alt=""></li>
            <li><img src="./img/002.gif" alt=""></li>
            <li><img src="./img/003.gif" alt=""></li>
            <li><img src="./img/004.gif" alt=""></li>
            <li><img src="./img/005.gif" alt=""></li>

        </ul>
        <!-- 创建导航按钮 -->
        <div id="navDiv">
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>

        </div>

    </div>
    <script>
        //获取imgList
        var imgList = document.getElementById('imgList');
        // 获取img标签
        var imgArr = document.getElementsByTagName('img');
        //设置轮播图宽度
        imgList.style.width = 300 * imgArr.length + 'px';

        // 设置导航按钮居中
        // ____________________________________________________________________
        //获取navDiv
        var navDiv = document.getElementById('navDiv')
        // 设置left值
        var box = document.getElementById('box')

        //____________________________________________________________________

        //获取所有的a
        var allA = document.getElementsByTagName("a");
        //默认显示图片的索引
        var index = 0;
        //设置默认选中的效果
        allA[index].style.backgroundColor = 'black'


        // 点击切换到指定的图片

        //绑定事件
        for (let i = 0; i < allA.length; i++) {
            //给每一个allA添加一个num属性
            allA[i].num = i;
            allA[i].onclick = function () {
                //获取点击第几个的索引,并将其设置为index
                index = this.num
                // //切换图片
                index = this.num
                imgList.style.left = -300 * index + "px"
                //设置默认选中的效果
                setA()
            }
        }
        //创建一个方法,让选中的变黑色
        function setA() {
            for (let i = 0; i < allA.length; i++) {
                allA[i].style.backgroundColor = ''
            }
            allA[index].style.backgroundColor = 'black'

        }
        //自动切换图片
        autoChange();//开启自动切换


        function autoChange() {
            setInterval(function () {
                //   索引自增
                index++;
                if (index <= allA.length) {
                    imgList.style.left = -300 * index + "px"
                    setA()
                } else {
                    index = 0
                }
            }, 3000)
        }






    </script>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #box {
        height: 300px;
        width: 300px;
        border: 2px solid red;
        /* 溢出隐藏 */
        overflow: hidden;
        /* 开启相对定位 */
        position: relative;
        left: 50%;
        transform: translateX(-50%);

    }

    #imgList {
        list-style: none;
        /* 开启绝对定位 */
        position: absolute;

    }


    #imgList li img {
        float: left;
        height: 300px;
        width: 300px;
        display: block;

    }

    #imgList li {
        flex: 1;

    }

    #navDiv {
        display: flex;
        position: absolute;
        /* 位置 */
        bottom: 20px;
        /* 居中 */
        left: 50%;
        transform: translateX(-50%);

    }

    #navDiv a {

        height: 20px;
        width: 20px;
        text-align: center;
        margin-left: 5px;
        background-color: red;
        opacity: 0.5;
        /* 兼容ie: 8px; */
        filter: alpha(opacity=50);
    }

    #navDiv a:hover {
        background-color: #000;
    }
</style>

</html>